<template>
	<div class="left-side-box">
		<div>
			<ul>
				<li class="li-item" v-for="(i, index) in labelList" :key="index" :class="activeIndex == index ? 'active' : ''" @click="triggerActive(index)">{{ i.name }}</li>
			</ul>
		</div>
	</div>
</template>

<script setup lang="ts" name="SideNavigation">
interface TLabelList {
	id: number;
	name: string;
}
const activeIndex = ref(0);
const emit = defineEmits(["getChildData"]);
const triggerActive = (index: number) => {
	activeIndex.value = index;
	emit("getChildData", index);
};
defineProps<{
	labelList: TLabelList[];
}>();
</script>

<style scoped lang="scss">
.active {
	color: #ffffff;
	background-color: #c39f63;
}
* {
	padding: 0;
	margin: 0;
}
li {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	list-style: none;
	cursor: pointer;
}
.left-side-box {
	width: 160px;
	height: 520px;
	background-color: #ffffff;
}
</style>
